@import "../../base/index";
html,
body {
  height: 100%;
}
body {
  min-width: 1200px;
  font-family: MicrosoftYaHei;
}
body a:hover {
  cursor: pointer;
  text-decoration: none;
}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.hide{
  display: none;
}
// 中间内容
.productdetail{
  width: 1200px;
  margin: 30px auto 0;
  .productdetail-top{
    .productdetail-top-nav{
      color: #333333;
      font-size: 0px;
      margin-bottom: 20px;
      a{
        font-size: 12px;
      }
      span{
        font-size: 12px;
        margin: 0px 8px;
      }
    }
    .productdetail-top-content{
      display:flex;
      .productdetail-top-l{
        position: relative;
        flex: 0 0 400px;
        width: 400px;
        margin-right: 20px;
        .productdetail-top-l-img{
          position: relative;
          width: 400px;
          height: 400px;
          background: #fff;
          cursor: move;
          margin-bottom: 20px;
          text-align: center;
          img{
            width: 100%;
            height: 100%;
          }
          .p-t-img-info{
            display: none;
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba($color: #ccc, $alpha: 0.6);
            top: 0px;
            left: 0px;
          }
        }
        .productdetail-top-big-img{
          display: none;
          position: absolute;
          width: 400px;
          height: 400px;
          top: 0px;
          left: 410px;
          background: red;
          z-index: 10;
          overflow: hidden;
          img{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200%;
            height: 200%;
            max-width: 200%;
            max-height: 200%;
          }
        }
        .productdetail-top-l-list{
          width: 400px;
          height: 60px;
          display: flex;
          span{
            flex: 0 0 30px;
            width: 30px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            cursor: pointer;
            i{
              font-size: 22px;
            }
          }
          .magnifyList-box{
            width: 340px;
            height: 60px;
            position: relative;
            overflow: hidden;
          }
          ul{
            position: absolute;
            li{
              float: left;
              width: 60px;
              height: 60px;
              background: #fff;
              box-sizing: border-box;
              cursor: pointer;
              margin-right: 10px;
              &:last-of-type{
                margin-right: 0px;
              }
            }
          }
        }
      }
      .productdetail-top-r{
        flex: 0 0 780px;
        width: 780px;
        position: relative;
        &.two{
          .p-t{
            margin-bottom: 30px;
          }
        }
        h2{
          font-size: 18px;
          font-weight: 700;
          color: #333333;
          margin-bottom: 17px;
        }
        p{
          font-size: 14px;
          color: #f47e37;
          margin-bottom: 24px;
        }
        .p-t-bg{
          width: 780px;
          height: 400px;
          background-color: #ecedf3;
        }
        .countdown{
          height: 60px;
          width: 780px;
          background: url("../images/countdown.png") no-repeat;
          background-size: 100% 100%;
          font-size: 0px;
          margin-bottom: 24px;
          i{
            font-weight: 700;
            font-size: 20px;
            margin-left: 30px;
            margin-right: 10px;
          }
          p{
            font-size: 16px;
            margin-bottom: 0px;
            span{
              display: inline-block;
              width: 24px;
              height: 24px;
              background-color: #ffffff;
              border-radius: 2px;
              color: #380d60;
              margin: 17px 6px;
              vertical-align: top;
              line-height: 24px;
              text-align: center;
            }
            &:last-of-type{
              float: right;
              margin-right: 24px;
            }
          }
          i,p{
            line-height: 60px;
            display: inline-block;
            color: #fff;
            vertical-align: top;
          }
        }
        .p-t{
          margin-left: 19px;
          p:first-child{
            width: 88px;
          }
          p{
            display: inline-block;
            font-size: 12px;
            color: #666666;
            margin-bottom: 0px;
          }
        }
        .p-t-price{
          margin-bottom: 23px;
          p:first-child{
            color: #999999;
            text-decoration: line-through;
          }
          p:nth-child(2){
            font-size: 18px;
            color: #f72b51;
            font-weight: 600;
            margin-right: 19px;
          }
          p:nth-child(3){
            width: 120px;
            height: 24px;
            background-color: #ff7f7f;
            border-radius: 12px;
            line-height: 24px;
            text-align: center;
            color: #ffffff;
            vertical-align: top;
          }
        }
        .p-t-integral,.p-t-activity{
          margin-bottom: 18px;
          p:nth-child(2){
            width: 100px;
            height: 24px;
            background-color: #dddce9;
            border-radius: 12px;
            color: #7a6b82;
            text-align: center;
            line-height: 24px;
          }
        }
        .p-t-activity{
          p:nth-child(3){
            color: #999999;
            margin-left: 19px;
          }
        }
        .p-t-sales{
          margin-bottom: 22px;
          i{
            color: #e4007f;
          }
          p:nth-child(3){
            color: #999999;
            margin-left: 26px;
            a{
              color: #61b7fe;
              margin-left: 12px;
            }
          }
        }
        .p-t-distribution{
          margin-bottom: 19px;
          position: relative;
          .p-t-address{
            position: relative;
            display: inline-block;
            border: 1px solid #CCC;
            height: 23px;
            font-size: 12px;
            line-height: 23px;
            cursor: pointer;
            background: #fff;
            #address-first{
              position: relative;
              line-height: 23px;
              padding: 0 10px;
              height: 23px;
              z-index: 8;
              background: #fff;
            }
          }
          .p-t-address-content{
            position: absolute;
            width: 400px;
            background: #fff;
            border: 1px solid #CCC;
            padding: 15px 14px 20px 14px;
            line-height: 18px;
            height: auto;
            top: 20px;
            left: -15px;
            z-index: 7;
            & > i{
              position: absolute;
              font-size: 30px;
              cursor: pointer;
              top: -10px;
              right: -14px;
              color: red;
            }
            .p-t-address-tabs{
              width: 100%;
              border: none;
              background: none;
              overflow: hidden;
              p{
                width: auto;
                float: left;
                padding: 2px 8px 0 10px;
                height: 20px;
                font-size: 12px;
                text-align: center;
                border: 1px solid #ddd;
                border-bottom: none;
                margin-right: 8px;
                background: #fff;
                cursor: pointer;
                color: #666;
                i{
                  font-size: 14px;
                }
                &.active{
                  border-left: 2px solid #ffb84e;
                  border-right: 2px solid #ffb84e;
                  border-top: 2px solid #ffb84e;
                  margin-right: 5px;
                  position: relative;
                  z-index: 9;
                }
              }
            }
            .p-t-address-item{
              float: left;
              width: 97%;
              display: inline;
              position: relative;
              left: 0;
              top: -1px;
              z-index: 8;
              overflow: hidden;
              border-top: 2px solid #ffb84e;
              padding: 15px 5px 5px 5px;
              a{
                max-width: 240px;
                height: 37px;
                line-height: 37px;
                vertical-align: middle;
                margin-top: -2px;
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 12px;
                padding: 0 5px 0 5px;
                &:hover{
                  background: #ff3300;
                  color: #fff;
                }
              }
            }
          }
        }
        .p-t-service{
          margin-bottom: 20px;
          a{
            color: #61b7fe;
            margin: 0 12px;
          }
        }
        .p-t-evaluation{
          display: inline-block;
          vertical-align: top;
          span{
            color: #61b7fe;
            margin-left: 4px;
          }
          .live{
            position: relative;
            display: inline-block;
            margin-left: 49px;
            vertical-align: top;
            i{
              display: inline-block;
              cursor: pointer;
              font-size: 24px;
              line-height: 24px;
            }
            p{
              font-size: 14px;
              line-height: 24px;
              vertical-align: top;
              margin-left: 4px;
              margin-right: 20px;
            }
            &.focus{
              color: #ff7f7f;
              p{
                color: #ff7f7f;
              }
            }
          }
          .focusicon{
            display: inline-block;
            cursor: pointer;
            font-size: 24px;
            line-height: 24px;
            position: relative;
            &:hover span{
              display: block;
            }
            span{
              position: absolute;
              display: none;
              width: 120px;
              height: 120px;
              background: #fff;
              padding: 15px;
              top: 35px;
              left: -23px;
              &:after{
                content: "";
                display: block;
                position: absolute;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 5px solid #fff;
                top:-5px;
                left: 25px;
              }
            }
          }
          // .focusicon:hover:after{
          //   content: "";
          //   position: absolute;
          //   display: block;
          //   width: 120px;
          //   height: 120px;
          //   padding: 30px;
          //   background: #fff;
          //   top: 35px;
          //   left: 48px;
          // }
        }
        .p-t-btn{
          font-size: 0px;
          position: absolute;
          bottom: 28px;
          right: 55px;
          button{
            vertical-align: top;
            width: 120px;
            height: 40px;
            background-color: #ff7f7f;
            border-radius: 4px;
            outline: none;
            border: none;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            &.btn-cart{
              background-color: #ffffff;
              border: solid 1px #ff7f7f;
              color: #ff7f7f;
              margin-right: 20px;
              i{
                font-size: 18px;
              }
            }
          } 
        }
      }
    }
  }
  .productdetail-center{
    margin-top: 60px;
    display: flex;
    .p-c-list{
      flex: 0 0 260px;
      background: #fff;
      padding-bottom: 65px;
      margin-right: 20px;
      height: 600px;
      h2{
        width: 260px;
        height: 40px;
        background-color: #4c4068;
        font-size: 14px;
        color: #61b7fe;
        line-height: 40px;
        text-align: center;
      }
      & > div{
        display: flex;
        p{
          flex: 1;
          text-align: center;
          height: 45px;
          line-height: 45px;
          cursor: pointer;
          &.active{
            color: #61b7fe;
            position: relative;
            &:after{
              content: "";
              position: absolute;
              width: 20px;
              height: 2px;
              background: #61b7fe;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }
      ul{
        margin-left: 23px;
        li{
          margin-top: 30px;
          display: flex;
          & > a{
            flex: 0 0 60px;
            width: 60px;
            height: 60px;
            margin-right: 10px;
          }
          div{
            flex: 0 0 128px;
            width: 128px;
            a{
              font-size: 12px;
              color: #333333;
              line-height: 15px;
              height: 30px;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;  //这里是在第二行有省略号
            }
            p{
              color: #f72b51;
              font-size: 12px;
              margin-top: 15px;
              span{
                color: #999;
                text-decoration: line-through;
                &.hide{
                  display: none;
                }
              }
            }
          }
        }
      }
    }
    .p-c-right{
      background: #fff;
      & > div{
        width: 920px;
        height: 40px;
        background-color: #dfdce1;
        p{
          display: inline-block;
          width: 120px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          cursor: pointer;
          &.active{
            background: #fff;
            color: #61b7fe;
          }
        }
      }
      ul{
        padding: 45px 20px 71px 0px;
        .switchcenter-content.hide{
          display: none;
        }
        .switchcenter-first{
          margin-left: 20px;
          width: 880px;
          div{
            margin: 6px auto;
            text-align: center;
          }
        }
        .switchcenter-second{
          margin-left: 33px;
          margin-right: 33px;
          display: flex;
          flex-wrap: wrap;
          div{
            flex: 0 0 50%;
            font-size: 16px;
            color: #333333;
            display: flex;
            margin-bottom: 10px;
            p{
              display: inline;
              flex: 0 0 285px;
              width: 285px;
              line-height: 30px;
              word-break: break-all;
              overflow: hidden;
            }
            span{
              flex: 0 0 100px;
              display: inline-block;
              color: #999999;
              line-height: 30px;
              font-size: 12px;
            }
          }
        }
        .switchcenter-third{
          margin-left: 35px;
          .s-c-evaluation{
            display: flex;
            & > p{
              font-size: 48px;
              color: #4b3a5f;
              font-weight: 700;
              margin-right: 56px;
              vertical-align: top;
            }
            div{
              vertical-align: top;
              margin-top: 15px;
              & > p{
                font-size: 12px;
                color: #999999;
                margin-bottom: 6px;
              }
              i{
                color: #fda527;
              }
            }
          }
          & > p{
            font-size: 12px;
            color: #999999;
            margin-top: 10px;
            margin-bottom: 50px;
          }
          .s-c-classifyone{
            width: 861px;
            height: 37px;
            border-bottom: 1px solid #ddd;
            display: flex;
            p{
              flex: 0 0 75px;
              height: 37px;
              width: 75px;
              font-size: 14px;
              color: #666666;
              cursor: pointer;
              margin-right: 25px;
              span{
                width: 34px;
                height: 20px;
                background-color: #f2f2f2;
                border-radius: 10px;
                display: inline-block;
                text-align: center;
                line-height: 20px;
                margin-left: 10px;
              }
              &.active{
                color: #f34921;
              }
            }
          }
          & > ul{
            margin-top: 15px;
            padding: 0px;
            .classifyone-item{
              position: relative;
              ul{
                padding: 0px;
                li{
                  width: 860px;
                  height: 200px;
                  box-shadow: inset 0px -1px 0px 0px 
                    rgba(0, 0, 0, 0.1);
                  margin: 8px 0 0 6px;
                  .c-i-top{
                    display: flex;
                    line-height: 50px;
                    margin-bottom: 9px;
                    div{
                      width: 50px;
                      height: 50px;
                      border-radius: 50%;
                      overflow: hidden;
                      margin-right: 10px;
                    }
                    a{
                      font-size: 14px;
                      color: #333333;
                      margin-right: 57px;
                    }
                    p{
                      i{
                        color: #fda527
                      }
                      &:first-of-type{
                        flex: 1;
                      }
                      &:last-of-type{
                        font-size: 12px;
                        color: #999999;
                        margin-right: 71px;
                      }
                    }
                  }
                  .c-i-center{
                    font-size: 12px;
                    line-height: 18px;
                    color: #666666;
                    margin-right: 71px;
                  }
                  .c-i-bottom{
                    margin-top: 20px;
                    div{
                      width: 50px;
                      height: 50px;
                      background-color: #e5e5e5;
                      float: left;
                      margin-right: 20px;
                      &:last-of-type{
                        margin-right: 0px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .switchcenter-fourth{
          margin-left: 36px;
          .fourth-prompt{
            font-size: 12px;
            color: #999999;
            margin-right: 113px;
            p{
              line-height: 18px;
              margin-top: 25px;
              margin-bottom: 40px;
            }
          }
          .s-c-classifytow{
            width: 861px;
            height: 42px;
            border-bottom: 1px solid #ddd;
            margin-bottom: 22px;
            p{
              line-height: 42px;
              float: left;
              width: 70px;
              font-size: 14px;
              margin-right: 30px;
              cursor: pointer;
              &.active{
                color: #f34921;
              }
            }
            a{
              display: inline-block;
              width: 90px;
              height: 30px;
              background-color: #ffffff;
              border-radius: 4px;
              border: solid 1px #61b7fe;
              text-align: center;
              line-height: 30px;
              float: right;
              margin-right: 17px;
              color: #61b7fe;
              font-size: 12px;
            }
          }
          ul{
            padding: 0px;
          }
          .classifytwo-item{
            li{
              width: 860px;
              height: 234px;
              margin-bottom: 30px;
              border-bottom: 1px solid #ddd;
              .ctwo-i-top{
                margin-bottom: 33px;
                p{
                  float: left;
                  font-size: 12px;
                  color: #666666;
                  line-height: 24px;
                  &:first-of-type{
                    width: 80px;
                    height: 24px;
                    background-color: #eef2f5;
                    border-radius: 12px;
                    color: #999999;
                    text-align: center;
                    margin-right: 10px;
                  }
                  &:last-of-type{
                    color: #999999;
                    margin-left: 32px;
                  }
                }
              }
              .ctwo-i-center{
                font-size: 0px;
                margin-bottom: 20px;
                i{
                  font-size: 12px;
                  color: #77d096;
                  margin-right: 8px;
                }
                p{
                  display: inline-block;
                  font-size: 12px;
                  color: #333333;
                  line-height: 18px;
                }
              }
              .ctwo-i-botton{
                padding: 15px 22px 13px 21px;
                background-color: #fafbfc;
                p{
                  font-size: 12px;
                  color: #ff561c;
                  line-height: 18px;
                  &:last-of-type{
                    color: #999999;
                  }
                }
              }
            }
          }
        }
        // 页码区
        .changepage{
          font-size: 0px;
          line-height: 20px;
          margin-top: 48px;
          a{
            font-family: MicrosoftYaHei;
            font-size: 12px;
            color: #999999;
            float: left;
            margin-right: 20px;
            &:last-child{
              margin-right: 0px
            }
          }
          ul{
            float: left;
            margin-right: 20px;
            li{
              width: 20px !important;
              height: 20px !important;
              margin: 0px !important;
            }
            li.active a{
              width: 20px;
              height: 20px;
              background-color: #0398e5;
              border-radius: 4px;
              color: #fff;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .productdetail-bottom{
    background: #fff;
    margin-top: 60px;
    & > div{
      width: 1200px;
      height: 40px;
      background-color: #dfdce1;
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      p{
        display: inline-block;
        width: 120px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        &.active{
          color: #61b7fe;
          background: #fff;
        }
      }
      div{
        float: right;
        line-height: 40px;
        margin-right: 28px;
        font-size: 12px;
        cursor: pointer;
        i{
          display: inline-block;
          line-height: 40px;
          margin-right: 2px;
        }
      }
    }
    ul{
      padding: 32px 0px 32px 20px;
      display: flex;
      margin-right: 20px;
      overflow-x: auto;
      &.hide{
        display: none;
      }
      li{
        margin-right: 20px;
        flex: 0 0 180px;
        &:last-of-type{
          margin-right: 0px;
        }
        div{
          width: 180px;
          height: 180px;
        }
        a{
          margin-top: 12px;
          width: 180px;
          height: 30px;
          font-size: 14px;
          line-height: 15px;
          height: 30px;
          overflow: hidden;
          color: #222222;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;  //这里是在第二行有省略号
        }
        p{
          color: #f72b51;
          font-size: 18px;
          margin-top: 20px;
          span{
            color: #999;
            font-size: 12px;
            text-decoration: line-through;
            &.hide{
              display: none;
            }
          }
        }
      }
    }
  }
}
// 弹出层
.pappus{
  display: none;
  .pappus-box{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background: rgba($color: #000000, $alpha: 0.5)
  }
  .pappus-info{
    position: fixed;
    width: 600px;
    height: 300px;
    background-color: #ffffff;
    border-radius: 10px;
    z-index: 16;
    top:50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    .pappus-close{
      position: absolute;
      top: 2px;
      right: 5px;
      font-size: 25px;
      cursor: pointer;
    }
    .pappus-types{
      margin: 30px 0 0 30px;
      span,label{
        font-size: 12px;
        color: #999999;
      }
    }
    .pappus-content{
      margin-left: 30px;
      font-size: 12px;
      position: relative;
      p{
        margin: 21px 0 11px 0;
        font-size: 12px;
      }
      textarea{
        width: 540px;
        height: 120px;
        background-color: #ffffff;
        border: solid 1px #eeeeee;
        resize: none;
      }
      i{
        position: absolute;
        bottom: 9px;
        right: 39px;
        color: #cccccc;
      }
    }
    #mpanel{
      .verify-code{
        text-align: center;
        cursor: pointer;
        margin: 31px 0 0 160px;
        float: left;
      }
      .verify-code-area{
        margin-left: 10px;
        float: left;
        margin-top: 26px;
        margin-right: 20px;
        width: 100px;
        height: 40px;
        .verify-change-area{
          display: none;
        }
      }
      input{
        width: 100px;
        height: 40px;
        background-color: #ffffff;
        border: solid 1px #eeeeee;
      }
    }
    #pappusRelease{
      width: 160px;
      height: 40px;
      background-color: #61b7fe;
      border-radius: 4px;
      outline: none;
      border: none;
      margin-top: 26px;
      cursor: pointer;
    }
  }
}